<template>
    <div>
        <Header />
        <el-container class="container">
            <el-aside width="200px" class="mt30">
                <el-menu >
                    <el-menu-item v-for="item in lData" :index="item.id" class="line-clamp1">
                        <el-text @click="router.push({ name: 'postsShow', params: { id: item.id } })" >🔥 {{item.title}}</el-text>
                    </el-menu-item>
                </el-menu>
            </el-aside>
            <el-main class="main">
                <div class="frontend-infos">
                    <div class="custom-style"><el-segmented @change="handleClick" v-model="form.type_id" :options="typeData" size="large" /></div>
                    <div class="mt20">
                        <el-card shadow="always">
                            <el-row :gutter="10" v-for="item in tableData" :key="item.id" class="posts-list cp" @click="router.push({ name: 'postsShow', params: { id: item.id } })">
                                <el-col :span="4" class="text-right">
                                    <el-image style="height: 40px;border-radius: 3px;" :src="item.cover" fit="contain" />
                                </el-col>
                                <el-col :span="20">
                                    <div class="title"><el-text size="large" tag="b">{{item.title}}</el-text></div>
                                </el-col>
                            </el-row>
                        </el-card>
                    </div>
                </div>
                <div class="el-pagination-div">
                    <el-pagination background  @current-change="handleCurrentChange" :default-page-size="12" layout="prev, pager, next" :total="form.total" />
                </div>
            </el-main>
            <el-aside width="200px" class="mt30">
                <el-menu >
                    <el-menu-item v-for="item in rData" :index="item.id" class="line-clamp1">
                        <el-text @click="router.push({ name: 'postsShow', params: { id: item.id } })"><el-icon style="top: 2px;" size="18"><Opportunity /></el-icon>{{item.title}}</el-text>
                    </el-menu-item>
                </el-menu>
            </el-aside>
        </el-container>
        <Footer />
    </div>
</template>

<script setup lang="ts">
import Header from '@/components/header.vue'
import Footer from '@/components/footer.vue'

import { onMounted, ref } from 'vue'
import http from '../../util/request'
import router from '../../router'
import { Opportunity } from '@element-plus/icons-vue'

const form = ref<any>({search:'',type_id:0,page:0,pageSize:15,total:0})
interface Item {
    id:number,
    title:string
    cover:string
    brief:string
    price:number
    created_at:string
}

const tableData = ref<Item[]>([]);
const lData = ref<Item[]>([]);
const rData = ref<Item[]>([]);

interface type {
    id:number,
    title:string
}

const typeData = ref<type[]>([]);

const onGetData = () => {
    http.post('/posts',form.value).then((response:any)=>{
        tableData.value = response.data.data
        form.value.total = response.data.total
    })
}

const onLData = () => {
    http.post('/posts',{tag:'热门',pageSize:8}).then((response:any)=>{
        lData.value = response.data.data
    })
}

const onRData = () => {
    http.post('/posts',{tag:'优选',pageSize:8}).then((response:any)=>{
        rData.value = response.data.data
    })
}

const onGetType = () => {
    http.post('/type',{model:'Post'}).then((response:any)=>{
        response.data.data.forEach((e:any) => {
            e.value = e.id
            e.label = e.title
        });
        response.data.data.unshift({label:'全部',value:0})
        typeData.value = response.data.data
        onGetData()
    })
}

const handleCurrentChange = (current:number) => {
    form.value.page = current
    onGetData()
}

onMounted(()=>{
    onGetType()
    onLData()
    onRData()
})

const handleClick = (data: number) => {
    form.value.type_id = data
    form.value.page = 1
    onGetData()
}
</script>

<style scoped lang="scss">
.container{width: 1280px;margin: 0px auto;}
.el-menu{border: none !important;}
.frontend-infos{width: 800px;}
.main {
    padding: 0px;
    
}
.tip {
    padding: 0px 15px;
}

.el-card {
    width: 800px;
    margin:auto
}

.posts-list {
    padding: 6px;
    .el-card {
        margin-bottom: 30px;
    }
    .el-text{font-size: 1.1rem;line-height: 250%;}
}
</style>
